﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Mạng xã hội mua bán siêu việt | ShoppingHere.com</title>
		<link rel="stylesheet" href="css/reset.css" type="text/css" />
		<link rel="stylesheet" href="css/common.css" type="text/css" />
		<link rel="stylesheet" href="css/home.css" type="text/css" />
		<script src="scripts/jquery-1.5.2.min.js"></script>
		<script src="scripts/common.js"></script>		
		<style type="text/css">
			#seller-details .content {
				overflow: hidden;
			}
		
			#seller-details .seller-info {
				overflow: hidden;
			}
		
			#seller-details .seller-info .image {
				float: left;
				margin-right: 20px;
			}
			
			#seller-details .seller-info .image img {
				width: 150px;
				-moz-border-radius: 5px;
				border-radius: 5px;
			}
			
			#seller-details .seller-info .username {
				font-weight: bold;
				font-size: 20px;
				color: #9BC022;
			}
			
			#seller-details .seller-info table {
				margin-top: 10px;
			}
			
			#seller-details .seller-info td {
				padding-top: 3px;
				padding-bottom: 3px;
				padding-right: 20px;
			}
			
			#seller-details .seller-events {
				margin-top: 10px;
				margin-bottom: 10px;
				
			}
			
			#seller-details .seller-events .seller-events-title {
				font-weight: bold;
				font-size: 18px;
				margin-bottom: 10px;
				color: #9BC022;
				border-bottom: 1px solid #9BC022;
				padding-bottom: 5px;
			}
			
			#seller-details .seller-events .seller-events-item {
				overflow: hidden;
				margin-bottom: 20px;
			}
			
			#seller-details .seller-events .seller-events-item .image-col {
				float: left;
				margin-right: 10px;
			}
			
			#seller-details .seller-events .seller-events-item .details-col {
				float: left;
				width: 600px;
			}
			
			#seller-details .seller-events .seller-events-item .name {
				font-weight: bold;
				font-size: 15px;
				margin-bottom: 3px;
				color: #9BC022;
			}
			
			#seller-details .seller-events .seller-events-item .start-date {
				margin-bottom: 3px;
			}
			
			#seller-details .seller-events .seller-events-item .end-date {
				margin-bottom: 3px;
			}
			
			#seller-details .seller-events .pager {
				text-align: center;
			}
			
			#seller-details .seller-events .pager ul li {
				display: inline;
			}
			
			#seller-details .seller-events .pager ul li.selected {
				color: #9BC022;
				font-weight: bold;
			}
		</style>
	</head>
	<body>
		<div id="page">
			<div id="subinfo">
				<div class="content">
					<table></tbody>
						<tr>
							<td class="phone">
								<p>Than phiền? Gọi 090-828-3489 (miễn cước)</p>
							</td>
							<td class="login">
								<ul>
									<li><a href="#">Nguyễn Việt Hùng</a> | </li>
									<li><a href="#">Giỏ hàng (14)</a> | </li>
									<li><a href="#">Thoát</a></li>
								</ul>
							</td>					
						</tr>
					</tbody></table>
				</div>
			</div>
			<div id="banner">
				<div class="content">
					<form>
						<label for="username">Tên đăng nhập:</label>
						<input id="username" class="tb" type="text" />
						<label for="password">Mật khẩu:</label>
						<input id="password" class="tb" type="password" />					
						<input id="remember" type="checkbox" />
						<label for="remember">Ghi nhớ đăng nhập</label>
						<input type="submit" class="btn" value="Đăng nhập" />
						<div id="close">đóng</div>
					</form>
				</div>
			</div>
			<div id="search">
				<div class="content">
					<form>
						<span>Tôi muốn tìm</span>
						<select>
							<option>sản phẩm</option>
							<option>gian hàng</option>
						</select>
						<span>có từ khóa là</span>
						<input class="tb" type="text" />
						<input class="btn" type="submit" value="Tìm kiếm">
						<span>hoặc</span>
						<a href="#">tìm nâng cao</a>
					</form>
				</div>
			</div>
			<div id="content">
			
			<div id="product-category" class="block layout-2col-col1">
				<div class="title"><h4>Loại mặt hàng</h4></div>
				<ul class="content">
					<li class="first"><a href="#">Thời trang</a></li>
					<li><a href="#">Điện thoại</a></li>
					<li><a href="#">Máy tính</a></li>
					<li><a href="#">Kỹ thuật số</a></li>
					<li><a href="#">Đồ điện</a></li>
					<li><a href="#">Gia đình</a></li>
					<li><a href="#">Xe máy</a></li>
					<li><a href="#">Nhà đất</a></li>
					<li class="last"><a href="#">Linh tinh</a></li>
				</ul>
			</div>
			
			
			<div id="seller-details" class="block layout-2col-col2">
				<div class="title"><h4>Chi tiết gian hàng</h4></div>
				<div class="content">
					<div class="seller-info">
						<div class="image">
							<img src="temp/avatar-large.jpg" />
						</div>
						<div class="info">
							<p class="username">nvhung222</p>
							<table>
								<tbody>
									<tr>
										<td>
											<label>Họ tên: </label><span>Nguyễn Văn A</span>
										</td>
										<td>
											<label>Điện thoại: </label><span>09089568978</span>
										</td>
									</tr>
									<tr>
										<td>
											<label>Giới tính: </label><span>Nam</span>
										</td>
										<td>
											<label>Ngày tạo: </label><span>01/01/2011</span>
										</td>
									</tr>
									<tr>
										<td>
											<label>Email: </label><span>nva11111@gmail.com</span>
										</td>
										<td>
											<label>Like: </label><span>10</span>
										</td>
									</tr>
									<tr>
										<td>
											<label>Địa chỉ: </label><span>123 ABC</span>
										</td>
										<td>
											<label>Tình trạng: </label><span>Bình thường</span>
										</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
					<div class="seller-events">
						<p class="seller-events-title">Sự kiện</p>
						<div class="seller-events-item">
							<div class="image-col">
								<img src="temp/calendar.jpg" />								
							</div>
							<div class="details-col">
								<p class="name">Sự kiện A</p>
								<p class="start-date"><label>Ngày bắt đầu: </label><span>01/01/2011</span></p>
								<p class="end-date"><label>Ngày kết thúc: </label><span>12/01/2011</span></p>
								<p class="details">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in fermentum tellus. Donec consequat dapibus risus et scelerisque. Sed et quam nisl. Aliquam laoreet pharetra sagittis. Praesent massa leo, aliquet varius posuere ac, tristique nec metus. Nullam nec congue diam.</p>
							</div>
						</div>
						<div class="seller-events-item">
							<div class="image-col">
								<img src="temp/calendar.jpg" />								
							</div>
							<div class="details-col">
								<p class="name">Sự kiện A</p>
								<p class="start-date"><label>Ngày bắt đầu: </label><span>01/01/2011</span></p>
								<p class="end-date"><label>Ngày kết thúc: </label><span>12/01/2011</span></p>
								<p class="details">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in fermentum tellus. Donec consequat dapibus risus et scelerisque. Sed et quam nisl. Aliquam laoreet pharetra sagittis. Praesent massa leo, aliquet varius posuere ac, tristique nec metus. Nullam nec congue diam.</p>
							</div>
						</div>
						<div class="seller-events-item">
							<div class="image-col">
								<img src="temp/calendar.jpg" />								
							</div>
							<div class="details-col">
								<p class="name">Sự kiện A</p>
								<p class="start-date"><label>Ngày bắt đầu: </label><span>01/01/2011</span></p>
								<p class="end-date"><label>Ngày kết thúc: </label><span>12/01/2011</span></p>
								<p class="details">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in fermentum tellus. Donec consequat dapibus risus et scelerisque. Sed et quam nisl. Aliquam laoreet pharetra sagittis. Praesent massa leo, aliquet varius posuere ac, tristique nec metus. Nullam nec congue diam.</p>
							</div>
						</div>
						<div class="seller-events-item">
							<div class="image-col">
								<img src="temp/calendar.jpg" />								
							</div>
							<div class="details-col">
								<p class="name">Sự kiện A</p>
								<p class="start-date"><label>Ngày bắt đầu: </label><span>01/01/2011</span></p>
								<p class="end-date"><label>Ngày kết thúc: </label><span>12/01/2011</span></p>
								<p class="details">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in fermentum tellus. Donec consequat dapibus risus et scelerisque. Sed et quam nisl. Aliquam laoreet pharetra sagittis. Praesent massa leo, aliquet varius posuere ac, tristique nec metus. Nullam nec congue diam.</p>
							</div>
						</div>
						<div class="pager">
							<ul>
								<li><a href="#"><</a></li>
								<li class="selected"><a href="#">1</a></li>
								<li><a href="#">2</a></li>
								<li><a href="#">3</a></li>
								<li><a href="#">></a></li>
							</ul>
						</div>
					</div>					
				</div>
			</div>
			
								
			</div>
			<div id="footer">
				<p>&copy; 2011 - Nhóm Ứng Dụng Phân Tán 1 - ĐHKHTN. All rights reserved.</p>
			</div>
		</div>
	</body>
</html>